<template>
  <div class="app-container">
    <el-form ref="form" :inline="true" :model="form" label-width="150px" :rules="rules">
      <el-row>
        <el-col :span="24">
          <el-form-item label="用户手机号" prop="username">
            <!-- @blur="handleBlur" -->
            <el-input v-model="form.username" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="上级推荐人" prop="username">
            <el-input v-model="form.ref_realname" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="上级推荐人手机号" prop="username">
            <el-input v-model="form.ref_username" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="购卡类型" prop="card_type">
            <el-select v-model="form.card_type" placeholder="请选择" clearable>
              <el-option
                v-for="(item,index) in cardsType"
                :key="index"
                :label="item.name"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="是否加购" prop="is_add" v-if="form.card_type == 3">
            <el-radio-group v-model="form.is_add">
              <el-radio :label="1">是</el-radio>
              <el-radio :label="0">否</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <!-- <el-col :span="24">
          <el-form-item label="支付方式">
            <el-select v-model="form.pay_type" placeholder="请选择" clearable>
              <el-option
                v-for="(item,index) in paysType"
                :key="index"
                :label="item.name"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>-->
        <el-col :span="24">
          <el-form-item label="支付方式">
            <el-input v-model="form.pay_type" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="现金金额" prop="money">
            <el-input v-model="form.money" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="订单支付时间" width="236" prop="pay_time">
            <el-date-picker
              v-model="form.pay_time"
              type="datetime"
              placeholder="订单支付时间"
              align="right"
              value-format="yyyy-MM-dd HH:mm:ss"
            ></el-date-picker>
            <!-- <el-date-picker
              v-model="form.pay_time"
              value-format="yyyy-MM-dd HH:mm:ss"
              type="daterange"
              range-separator="-"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              :default-time="['00:00:00', '23:59:59']"
            />-->
          </el-form-item>
        </el-col>
        <el-col>
          <el-button class="mr" type="primary" @click="orderSubmit('form')">订单提交</el-button>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>
<script>
import { orderAdd, superiorReferee } from "@/api/goddessMange";
export default {
  name: "goddessOrderAdd",
  data() {
    return {
      form: {
        username: "",
        card_type: "",
        pay_type: 4 ? "线下支付" : "",
        is_add: "",
        pay_time: "",
        money: "",
        gold: "",
        ref_realname: "",
        ref_username: ""
      },

      cardsType: [
        {
          name: "女王卡",
          value: 1
        },
        {
          name: "青春卡",
          value: 2
        },
        {
          name: "轻颜卡",
          value: 3
        }
      ],
      payDates: [],
      paysType: [
        {
          name: "现金",
          value: 1
        },
        {
          name: "现金+金币",
          value: 3
        },
        {
          name: "纯金币",
          value: 2
        },
        {
          name: "线下",
          value: 4
        }
      ],
      rules: {
        username: [
          {
            required: true,
            message: "请填写用户手机号",
            trigger: "blur"
          }
        ],
        card_type: [
          {
            required: true,
            message: "请选择购卡类型",
            trigger: "change"
          }
        ],
        is_add: [
          {
            required: true,
            message: "请选择是否加购",
            trigger: "change"
          }
        ],
        money: [
          {
            required: true,
            message: "请填写现金金额",
            trigger: "blur"
          }
        ],
        gold: [
          {
            required: true,
            message: "请填写金币金额",
            trigger: "blur"
          }
        ],
        pay_time: [
          {
            required: true,
            message: "请选择支付时间",
            trigger: "blur"
          }
        ]
      }
    };
  },
  watch: {
    "form.username"(val) {
      if (val.length === 11) {
        this.handleBlur(val);
      }
    }
  },
  methods: {
    // 获取上级推荐人姓名
    handleBlur(val) {
      if (!val) {
        return false;
      }
      let data = {
        username: this.form.username
      };
      // console.log("data", data);
      if (this.form.username) {
        superiorReferee(data).then(res => {
          if (res.data.code == 200) {
            // console.log("res", res.data.data);
            this.form.ref_realname = res.data.data.ref_realname;
            this.form.ref_username = res.data.data.ref_username;
          } else {
            this.$message({
              showClose: true,
              message: res.data.msg,
              type: "warning"
            });
            this.form.ref_realname = "";
            this.form.ref_username = "";
          }
        });
      } else {
        this.form.ref_realname = "";
        this.form.ref_username = "";
      }
    },
    orderSubmit(form) {
      let data = { ...this.form };
      data.pay_type = 4;
      this.$refs[form].validate(valid => {
        if (valid) {
          orderAdd(data)
            .then(res => {
              if (res.data.code == 200) {
                this.$message({
                  showClose: true,
                  message: "添加成功",
                  type: "success"
                });
                this.$router.push("/goddessOrder");
              } else {
                this.$message({
                  showClose: true,
                  message: res.data.msg,
                  type: "warning"
                });
              }
            })
            .catch(err => {
              this.$message({
                message: err.msg,
                type: "error"
              });
            });
        } else {
          this.$message({
            message: "有必填项没填，不能提交咯",
            type: "warning"
          });
        }
      });
    }
  }
};
</script>
<style scoped>
.el-input__inner {
  width: 236px;
}
.mr {
  margin-left: 200px;
}
</style>